<template>
	<div class="app-container">
		<div id="monthBusinessRange" style="width: 100%;height: 300%;"></div>
	</div>
</template>

<script>
	import {
		monthBusiness
	} from '@/api/dataview'
	
	import * as echarts from 'echarts'

	export default {
		name: 'HelloWorld',
		data() {
			return {
				options: {
					title: {
						text: '每月业务量'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					legend: {
						data: [ '分发', '结论','请验' ]
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: '请验',
							type: 'line',
							stack: 'Total1',
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							data: []
						},
						{
							name: '分发',
							type: 'line',
							stack: 'Total2',
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							data: []
						},
						{
							name: '结论',
							type: 'line',
							stack: 'Total3',
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							data: []
						}
					]
				}
			}
		},
		mounted() {
			this.initChart()
		},
		methods: {
			initChart() {
				monthBusiness().then(res => {
					this.options.xAxis[0].data = res.check.xAxis
					this.options.series[0].data = res.check.dispense;
					this.options.series[1].data = res.check.verdict;
					this.options.series[2].data = res.check.check;
					var myChart = echarts.init(document.getElementById('monthBusinessRange'));
					myChart.setOption(this.options);
				})


			}
		},
	}
</script>
